<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .div_head{
            padding: 0;
            position:fixed;
            width: 100%;
            height: 4rem;
            right: 0;
            top:0;
            background-color:white;
            z-index: 55;
        }
        #head_span{
            display: block;
            margin: 9px 70px 0 0 ;
        }
        #head_span>a{
            text-decoration: none;
            color: #909399;
            margin-left: 20px;
        }
        #head_span a:hover{
            color: rgb(145, 160, 208);
        }

        h1{
            text-align: center;
        }
        hr{
            width: 600px;
        }
        .div_p{
            width: 250px;
            height: 30px;
            float: right;
            background-color: rgb(255,255,255);
            color: rgb(29,56,136);
            border: solid 1px #cbcbef;
            position: absolute;
            margin: 0 0 20px 240px;
            padding: 10px;
            bottom: 0;
            left: 8px;
            right: 0;
            font-size: 14px;
            text-align: center;
        }
        .div_card{
            position: relative;
            width: 770px;
            height: 800px;
            margin: 0 auto;
        }
        .p_card{
            margin: -4px 0 -12px 0;
            color: #181616;
        }
        .p{
            font-size: 13px;
            padding: 0 0 20px;
            color: #3C2314;
        }
    </style>
</head>
<body>
<div id="app">
    <!--上部选择-->
    <el-container>
        <el-header><!--头部导航栏-->
            <div class="div_head">
                <el-menu mode="horizontal" background-color="white"
                         text-color="color: rgb(29, 56, 136)" active-text-color="color: rgb(29, 56, 136)" style="width:1200px;margin: 0 auto">
                    <el-menu-item><img  height="50px" src="imgs/logo.png" alt=""></el-menu-item>
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">蛋糕</el-menu-item>
                    <el-menu-item index="3">下午茶</el-menu-item>
                    <el-menu-item index="4">精选食材</el-menu-item>
                    <el-menu-item index="5">最新活动</el-menu-item>
                    <el-menu-item index="6">企业专区</el-menu-item>
                    <el-menu-item index="6">会员中心</el-menu-item>
                    <div style="float: right;position: relative; top: 10px">
                <span id="head_span">
                <a href="">登录 </a> <a href=""> 注册</a>
                    <a href=""><i class="el-icon-s-goods" style="margin-left: 10px"></i></a>
                </span>
                    </div>
                </el-menu>
            </div>
        </el-header>
        <el-main style="margin: 0 auto">
                <hr>
                <h1>精选食材</h1>
                <hr>
                <div class="div_card">
                    <img src="imgs/精选食材1.jpg" alt="">
                    <div class="div_p">
                        <p class="p_card">巧克力</p>
                        <p>没有法芙娜 就没有高潮</p>
                    </div>
                </div>
                <div style="width: 770px">
                <p class="p">
                    《浓情巧克力》的女主角朱丽叶·比诺什说：“你不能拒绝巧克力，就像你不能拒绝爱情。”
                    如果你曾品尝过浓郁巧克力蛋糕的绝妙滋味，着迷于那宛如在味蕾上跳舞、醇美芳香的神奇余韵时，
                    你就已坠入法芙娜巧克力蛋糕带来的高潮迭起中，自此再也无法自拔。
                    <br><br>
                    法芙娜，被业界誉为巧克力中的爱马仕，通常都是用殿堂级来形容法芙娜的巧克力品质和地
                    位，法芙娜在每年度的世界甜点大赛和世界巧克力学会的排名位居前列。
                    <br><br>
                    法国总统希拉克、好莱坞大明星茱莉亚·罗伯茨、罗伯特·德尼罗都深深为它着迷，就连美国白宫的大厨
                    ，也坚持使用法芙娜的巧克力原料来制作糕点，让前任总统小布什成为法芙娜强有力的支持者。
                    <br><br>
                    1922年，糕点大师AlbericGuironnet在法国TainI'Hermitage开设了一家巧克力
                    工坊Chocolateriedu Vivarais，也就是现今的法芙娜。
                </p>
                </div>
            <div class="div_card">
                <img src="imgs/精选食材2.jpg" alt="">
                <div class="div_p">
                    <p class="p_card">稀奶油</p>
                    <p>动物奶油</p>
                </div>
            </div>
            <div style="width: 770px">
                <p class="p">
                    当你品尝到有家蛋糕时，舌尖触碰的一瞬间，心情也会随之融化。稀奶油细如凝脂，为蛋糕注入甜蜜的味道与丰富的营养。
                    <br><br>
                    有家蛋糕选取的稀奶油经过超高温灭菌（UHT）处理，保留大部分的营养成分；具有浓郁的奶香味，外观诱人。
                    使用此种稀奶油所做的蛋糕质地细致，口感上佳。含有蛋白质、碳水化合物及少量的维生素和矿物质，有助于维持机体代谢。
                    <br><br>
                    Tips:Elle&Vire（铁塔）是来自法国的奶制品知名品牌，是欧洲各国西点产品中应用最为广泛的高端品牌，具有浓郁
                    的奶香味，口感柔滑，入口即溶，为全球众多喜爱西式糕点的人们难以割舍与忘怀。为制作蛋糕的上上之选！
                </p>
            </div>
            <div class="div_card">
                <img src="imgs/精选食材3.jpg" alt="">
                <div class="div_p">
                    <p class="p_card">芝士</p>
                    <p>乳品中的黄金</p>
                </div>
            </div>
            <div style="width: 770px">
                <p class="p">
                    还记得年少时看到卡通片《猫和老鼠》中的Jerry手捧芝士大快朵颐时，你一定和我一样对香浓的芝士垂涎。芝士以它
                    诱人的外观和醇香的口感被越来越多的人喜爱。它不但口感香浓，还具有丰富的营养价值。在欧洲许多国家，芝士是餐桌上必不可少的食材。
                    <br><br>
                    芝士是一种浓缩的乳制品，它基本上排除了乳制品中的大量水分，保留了其中营养价值极高的精华部分，被誉为乳品中的“黄金”。它的种
                    类成百上千，这取决于所用菌类、奶脂量的多少及发酵的时间长短。经过发酵作用制成后，不论哪一种芝士，都是营养的集结品。
                    <br><br>
                    清新的味道源于优质的原料。有家蛋糕选取来自新西兰Anchor （安佳）芝士，其中蛋白质、矿物质等营养成分的组成让美味的
                    芝士更增添了诱人的美味元素，精湛的工艺流程使蛋糕将芝士的美味发挥到极致，不但具有浓郁醇香的口感，更将营养全数送达。
                    <br><br>
                    恒天然集团是新西兰的乳液集团，是世界十大乳品之一，致力于世界各地的餐饮业。旗下的“安佳”品牌具有优秀品质，在亚洲地区被
                    广泛的认识和信任，代表着可靠的和始终如一的品质。
                </p>
            </div>
            <div class="div_card">
                <img src="imgs/精选食材4.jpg" alt="">
                <div class="div_p">
                    <p class="p_card">蜂蜜</p>
                    <p>甜蜜密码</p>
                </div>
            </div>
            <div style="width: 770px">
                <p class="p">
                    最理想的甜应该是非常婉约的东西,它的最高境界应该是若隐若现,并且在吃过之后具有美好的回甜。
                    <br><br>
                    无可厚非，糖确实在蛋糕制作中起到了至关重要的作用，调味、去腥、塑形、调色，甚至还能抵抗蛋糕老化，真
                    是立下汗马功劳。即便如此，糖吃多了还是身体的重要隐患。怎么办？蜂蜜是有家献给食客的甜蜜礼物。
                    <br><br>
                    蜂蜜含有丰富的葡萄糖，是营养价值很高的滋补品，还能增加人体体抗力，这些功效被大家众所周知。虽然蜂蜜的
                    价格是优质的砂糖的5倍，但它带来的健康却是不能用数字计算的。
                    <br><br>
                    很多人说，有家蛋糕太“素颜”了！其实或许你不知道，仅仅蜂蜜代糖这一项就阻止了多少有家在“美颜”蛋糕
                    领域的尝试。因为糖确实对于蛋糕的塑形起到了至关重要的作用。即便如此，有家的口
                    号依然是：如若健康注定简单，那么有家蛋糕选择健康。
                </p>
            </div>
        </el-main>

        <el-footer>
            <div style="background-color: #282c30;color: #666666;text-align: center;padding: 50px 0">
                <p>有家蛋糕 提前3小时预订，北京市六环内免费配送 公司地址：北京市朝阳区798艺术区工美楼3层</p>
                <p>Copyright © 2009-2023 ebeecake有家蛋糕 有家（北京）食品有限公司 京ICP备09081733号-1 <img src="https://cdn.tmooc.cn/tmooc-web/css/img/beianh2019082901.png"> 京公网安备 11010802029572号</p>
                <p>公司电话：4006106798    食品经营许可证：JY11105110232865    食品生产许可证：SC12411051114584</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1'
            }
        },
        methods:{
                handleSelect(key,keyPath){
                    console.log(key,keyPath);
                }
        }
    })
</script>
</html>